<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	import { getSeckillTime, getSeckillList } from '@/api/shop'
	import { parseTime } from '@/utils/common'
	
	const loading = ref(false)
	const loadStatus = ref('loadmore')
	const navTopList = ref([])
	const navTopCurrent = ref(-1)
	const navTopLeft = ref(0)
	const query = ref({startTime: '', current: 1, size: 20})
	const triggered = ref(false)
	const total = ref(0)
	const list = ref([])
	const form = ref({items: []})
	
	function handleNavTop(index) {
		if(index != navTopCurrent.value) {
			navTopCurrent.value = index
			query.value.startTime = navTopList.value[index]
			navTopLeft.value = index > 0 ? (index - 1) * 160 : 0
			triggered.value = true
		}
	}
	function getTime() {
		loading.value = true
		getSeckillTime().then(res => {
			let result = res.result || []
			navTopList.value = result
			if(result.length) handleNavTop(0)
			loading.value = false
		}).catch(() => loading.value = false)
	}
	function refreshList() {
		if(loadStatus.value === 'loading') return
		loadStatus.value = 'loading'
		triggered.value = true
		list.value = []
		form.value = {items: []}
		query.value.current = 1
		getSeckillList(query.value).then(res => {
			let result = res.result || {}
			let data = result.records || []
			total.value = Number(result.total)
			let info = data[0] || {items: []}
			if(info) {
				info.startCount = countTime(parseTime(info.startTime, '{y}/{m}/{d} {h}:{i}:{s}'))
				info.endCount = countTime(parseTime(info.endTime, '{y}/{m}/{d} {h}:{i}:{s}'))
			}
			form.value = info
			list.value = data
			triggered.value = false
			let curLength = list.value.length || 0
			loadStatus.value = curLength === total.value? 'nomore' : 'loadmore'
		}).catch(() => {
			triggered.value = false
			loadStatus.value = 'loadmore'
		})
	}
	function countTime(timeStr) {
		let nowTimeStamp = +new Date()
		let endTimeStamp = +new Date(timeStr)
		let seconds = endTimeStamp - nowTimeStamp
		return seconds > 0? seconds : 0
	}
	function startCountFinish() {
		form.value.alive = 1
	}
	function endCountFinish() {
		form.value.alive = 2
	}
	function goBuy(item) {
		if(loading.value) return
		loading.value = true
		let data = {
			total: item.specialPrice,
			list: [{
				id: item.goodsId,
				name: item.goodsName,
				furl: item.img && item.img.furl || '',
				price: item.specialPrice,
				number: 1,
				type: 'SPECIAL'
			}]
		}
		uni.navigateTo({
			url: '/pages/shop/orderConfirm?id=' + form.value.specialId,
			success: res => {
				res.eventChannel.emit('orderConfirm', data)
			}
		})
		loading.value = false
	}
	
	onLoad((option) => {
		getTime()
	})
</script>

<template>
	<view class="app-container">
		<scroll-view scroll-x="true" class="app-head" :scroll-left="navTopLeft" scroll-with-animation='true' v-if="navTopList.length">
			<view :class="['head-item', navTopCurrent == index? 'active' : '']" v-for="(nav, index) in navTopList" :key="index" @click="handleNavTop(index)">
				<view class="head-box">{{parseTime(nav, '{m}月{d}日')}}</view>
			</view>
		</scroll-view>
		<scroll-view scroll-y="true" class="app-content" refresher-enabled :refresher-triggered="triggered" @refresherrefresh="refreshList">
			<view class="status-box">
				<view class="seckill-status" v-if="form.alive === 0">
					<view class="status-title">{{parseTime(form.startTime, '{h}:{m}')}}开抢</view>
					<view class="status-end">
						<text>距开始</text>
						<uv-count-down :time="form.startCount" format="HH：mm：ss" @finish="startCountFinish"></uv-count-down>
					</view>
				</view>
				<view class="seckill-status" v-else-if="form.alive === 1">
					<view class="status-title">{{parseTime(form.startTime, '{h}:{m}')}}已开抢</view>
					<view class="status-end" >
						<text>距结束</text>
						<uv-count-down :time="form.endCount" format="HH：mm：ss" @finish="endCountFinish"></uv-count-down>
					</view>
				</view>
				<view class="seckill-status" v-else-if="form.alive === 2">
					<view class="status-title">{{parseTime(form.startTime, '{h}:{m}')}}已开抢</view>
					<view class="status-end" >
						<text>已结束</text>
					</view>
				</view>
			</view>
			<view class="content-list" v-if="form.items.length">
				<view class="list-box" v-for="item in form.items" :key="item.id">
					<uv-image :src="item.img && item.img.furl" width="200" height="200"></uv-image>
					<view class="goods-info">
						<view class="goods-name uv-line-1">{{item.goodsName}}</view>
						<view class="goods-num" v-if="form.alive === 0">
							<view class="num-box">
								<view class="num-label">即将开抢</view>
							</view>
						</view>
						<view class="goods-num" v-else-if="form.alive === 1">
							<view class="num-box">
								<view class="num-value" :style="{width: Math.floor(item.soldNum * 100 / item.specialNum) + '%'}" ></view>
								<view class="num-label">{{Math.floor(item.soldNum * 100 / item.specialNum)}}%</view>
							</view>
							<view class="num-already">已抢{{item.soldNum}}份</view>
						</view>
						<view class="goods-num" v-if="form.alive === 2">
							<view class="num-box">
								<view class="num-label">已经结束</view>
							</view>
						</view>
						<view class="goods-tags">
							<uv-tags :text="'限购' + item.limitNum + '份'" borderColor="rgba(250,63,0,0.1)" bgColor="rgba(250,63,0,0.1)" color="#FA3F00" 
								shape="circle" size="mini"></uv-tags>
						</view>
						<view class="goods-buy">
							<view class="goods-price">特惠：<text class="text-price">{{item.specialPrice? item.specialPrice.toFixed(2) : 0.00}}</text></view>
							<view :class="[ 'buy-btn', loading ? 'btn-disabled' : '']" @click="goBuy(item)" 
								v-if="form.alive === 1 && item.soldNum != item.specialNum" >抢</view>
						</view>
					</view>
				</view>
				<uv-load-more :status="loadStatus" fontSize="28" iconSize="34" isDot line></uv-load-more>
			</view>
			<view class="list-empty" v-else>
				<empty text="没有找到活动商品"></empty>
			</view>
		</scroll-view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 2rpx;
		height: 100vh;
		.app-head{
			width: 100%;
			height: 156rpx;
			white-space: nowrap;
			background-color: #FFFFFF;
			.head-item{
				margin-left: 24rpx;
				display: inline-block;
				width: 160rpx;
				height: 100%;
				padding: 24rpx 0;
				.head-box{
					width: 100%;
					height: 100%;
					border-radius: 16rpx;
					font-size: var(--theme-lg);
					line-height: var(--theme-lg-line);
					display: flex;
					justify-content: center;
					align-items: center;
				}
				&.active{	
					.head-box{
						font-weight: 600;
						color: #FFFFFF;
						background: linear-gradient( 102deg, #FA3F00 0%, #FF7445 100%);
					}
				}
			}
			.head-item:last-child {
				margin-right: 24rpx;
			}
		}
		.app-content{
			width: 100%;
			height: calc(100% - 156rpx);
			.status-box{
				padding: 24rpx;
				.seckill-status{
					display: flex;
					flex-direction: column;
					gap: 16rpx;
					.status-title{
						text-align: center;
						font-weight: 600;
						font-size: var(--theme-xl);
						line-height: var(--theme-xl-line);
					}
					.status-end{
						color: #291D1D;
						display: flex;
						justify-content: center;
						align-items: center;
						gap: 10rpx;
					}
				}
			}
			.content-list{
				padding: 0 24rpx;
				display: flex;
				flex-direction: column;
				gap: 24rpx;
				.list-box{
					padding: 24rpx;
					background-color: #FFFFFF;
					display: flex;
					gap: 24rpx;
					border-radius: 12rpx;
				}
			}
			.goods-info{
				width: calc(100% - 224rpx);
				.goods-name{
					font-weight: 600;
				}
				.goods-num{
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					gap: 32rpx;
					font-size: var(--theme-sm);
					line-height: var(--theme-sm-line);
					.num-box{
						width: 262rpx;
						height: 32rpx;
						background-color: #FBC9C9;
						border-radius: 32rpx;
						position: relative;
						.num-value{
							height: 100%;
							width: 100%;
							background-color: #FF0000;
							background-size: 40%;
							border-radius: 32rpx;
						}
						.num-label{
							position: absolute;
							top: 0;
							left: 0;
							right: 0;
							bottom: 0;
							z-index: 10;
							text-align: center;
							line-height: 32rpx;
							color: #FFFFFF;
						}
					}
				}
				.goods-tags{
					margin-top: 16rpx;
					display: flex;
					align-items: center;
					gap: 12rpx;
				}
				.goods-buy{
					min-height: 60rpx;
					display: flex;
					align-items: flex-end;
					gap: 16rpx;
					.goods-price{
						width: calc(100% - 172rpx);
						color: #FF0D0D;
						font-size: var(--theme-sm);
						line-height: var(--theme-sm-line);
						.text-price{
							font-weight: 600;
							font-size: var(--theme-lg);
							line-height: var(--theme-lg-line);
							&::before{
								content: "¥";
								font-size: 60%;
							}
						}
					}
					.buy-btn{
						width: 156rpx;
						height: 60rpx;
						background-image: url('https://jhgk-1307466921.cos.ap-shanghai.myqcloud.com/opt/AppCollect/PersonJkzImg/2025-02-26/1740558511058_seckill.png');
						background-size: 100%;
						text-align: center;
						color: #FFFFFF;
						font-weight: 600;
						font-size: var(--theme-lg);
						line-height: 60rpx;
					}
					.btn-disabled{
						opacity: 0.4;
					}
				}
			}
			.list-empty{
				margin: 0 24rpx;
				padding: 32rpx 0;
				background-color: #FFFFFF;
				border-radius: 12rpx;
			}
		}
	}
</style>